<template>
  <Card 
    class="bg-white/80 backdrop-blur-sm border border-white/20 transition-all duration-300 h-12 min-w-[120px]"
    padding="none"
  >
    <div class="flex items-center justify-center gap-2 h-full p-2" style="padding-top: 8px;">
      <div :class="iconClasses">
        <svg v-if="typeof icon === 'string'" class="h-3 w-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="icon"></path>
        </svg>
        <component v-else :is="icon" class="h-3 w-3 text-white" />
      </div>
      <div class="flex items-center justify-center min-w-0 flex-1">
        <span class="text-xs font-medium text-gray-600">{{ label }}</span>
        <span :class="valueClasses" class="ml-1">{{ value }}</span>
      </div>
    </div>
  </Card>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import Card from '@/components/ui/Card.vue'

interface Props {
  label: string
  value: string | number
  icon: any | string
  color?: 'blue' | 'green' | 'yellow' | 'purple' | 'red' | 'gray'
}

const props = withDefaults(defineProps<Props>(), {
  color: 'blue'
})

const iconClasses = computed(() => {
  const baseClasses = 'p-1.5 rounded-lg shadow-sm'
  
  const colorClasses = {
    blue: 'bg-gradient-to-r from-blue-500 to-blue-600',
    green: 'bg-gradient-to-r from-green-500 to-green-600',
    yellow: 'bg-gradient-to-r from-yellow-500 to-yellow-600',
    purple: 'bg-gradient-to-r from-purple-500 to-purple-600',
    red: 'bg-gradient-to-r from-red-500 to-red-600',
    gray: 'bg-gradient-to-r from-gray-500 to-gray-600'
  }
  
  return [baseClasses, colorClasses[props.color]].join(' ')
})

const valueClasses = computed(() => {
  const baseClasses = 'text-sm font-bold leading-tight'
  
  const colorClasses = {
    blue: 'text-blue-600',
    green: 'text-green-600',
    yellow: 'text-yellow-600',
    purple: 'text-purple-600',
    red: 'text-red-600',
    gray: 'text-gray-600'
  }
  
  return [baseClasses, colorClasses[props.color]].join(' ')
})
</script>
